<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>登录</title>
  <link rel="stylesheet" href="css/common.css">

  <link rel="stylesheet" href="layui-v2.8.0/layui/css/layui.css">
  <style>
    .layui-row{
      height: 50px;
      background-color: rgba(255,255,255,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .demo-login-container {
      width: 320px;
      margin: 21px auto 0;
    }

    .demo-login-other .layui-icon {
      position: relative;
      display: inline-block;
      margin: 0 2px;
      top: 2px;
      font-size: 26px;
    }

    .login-container {
      width: 100%;
      height: calc(100% - 50px);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .login-center {
      width: 400px;
      height: 200px;
      background-color: rgba(255, 255, 255, 0.7);
    }

  </style>
</head>

<body>
<!--导航栏-->
<div class="layui-row">
  <div class="layui-col-sm3">
    <div class="grid-demo grid-demo-bg1">
      <div><img src="image/博弈.png" alt="">五子棋对战</div>
    </div>
  </div>
  <div class="layui-col-sm3">
    <div class="grid-demo"></div>
  </div>
  <div class="layui-col-sm3">
    <div class="grid-demo grid-demo-bg1"></div>
  </div>
  <div class="layui-col-sm3">
    <div class="grid-demo">
      <a href="login.html">
        <img src="image/login.png" alt="">登录
      </a>
      <a href="register.html">
        <img src="image/register.png" alt="">注册
      </a>
    </div>
  </div>
</div>

  <div class="login-container">
    <div class="login-center">
<!--      <form class="layui-form">-->
        <div class="demo-login-container">
          <div class="layui-form-item">
            <div class="layui-input-wrap">
              <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-username"></i>
              </div>

              <input type="text" name="username" id="username" value="" lay-verify="required"
                     placeholder="用户名" lay-reqtext="请填写用户名"
                autocomplete="off" class="layui-input" lay-affix="clear">

            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-wrap">
              <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-password"></i>
              </div>

              <input type="password" name="password" id="password" value="" lay-verify="required" placeholder="密   码"
                lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">

            </div>
          </div>
          <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login" id="submit">登录</button>
          </div>
        </div>
<!--      </form>-->
    </div>
  </div>

  <script src="js/jquery.js"></script>
  <script>
      let usernameInput = document.querySelector('#username');
      let passwordInput = document.querySelector('#password');
      let submit = document.querySelector('#submit');
      submit.onclick = function () {
        $.ajax({
          type: 'post',
          url: '/login',
          data: {
            username: usernameInput.value,
            password: passwordInput.value,
          },
          success: function (body) {
            // 登陆成功时
            // 先进行判断
            if (body && body.userId > 0){
              location.assign('/game_hall.html');
            }else{
              alert('登录失败!');
            }
          },
          error: function (){
            alert('登录失败!');
          }
        });
      }

  </script>
</body>

</html>